import Taro, { Component } from "@tarojs/taro";
import {
  View,
  Text,
  Swiper,
  SwiperItem,
  Button,
  ScrollView
} from "@tarojs/components";
import "./index.less";
import {
  AtButton,
  AtFab,
  AtSearchBar,
  AtCard,
  AtNoticebar,
  AtAvatar
} from "taro-ui";
import { ClSwiper, ClText } from "mp-colorui";
import { articleList } from "../../mock/index";
import bg1 from "../../assets/images/cardbg1.png";
import banner1 from "../../assets/images/banner-main.png";
// import "./index.less";
const swiperList = [
  {
    id: 1,

    title: "第一个标题",
    type: "image",
    url: require("../../assets/images/banner-main.png"),
    desc: "简略描述内容"
  },
  {
    id: 2,
    title: "第二个标题",
    type: "image",
    url: require("../../assets/images/banner-main.png"),
    desc: "简略描述内容"
  },
  {
    id: 3,
    title: "第三个标题",
    type: "image",
    url: require("../../assets/images/banner-main.png"),
    desc: "简略描述内容"
  },
  {
    id: 4,
    title: "第四个标题",
    type: "image",
    url: require("../../assets/images/banner-main.png"),
    desc: "简略描述内容"
  }
];
const scrollStyle1 = {
  marginTop: "70%",
  top: 0,
  bottom: 0,
  position: "fixed",
  width: "100%",
  overflowY: "scroll"
};
const scrollStyle2 = {
  top: 0,
  bottom: 0,
  marginTop: "70%",
  width: "100%",
  position: "fixed",
  overflowY: "scroll"
};
export default class Main extends Component {
  config = {
    navigationStyle: "custom"
  };
  constructor() {
    super(...arguments);
    this.state = {
      value: "",
      scroolType: scrollStyle1
    };
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  goTitleDetail = value => {
    Taro.navigateTo({
      url:
        "../../pages/articleDetail/index?id=" +
        value.id +
        "&title=" +
        value.title
    });
  };
  onChange(value) {
    this.setState({
      value: value
    });
  }
  onActionClick() {
    console.log("开始搜索");
  }
  handleSwipperDetail = e => {
    console.log("12");
    console.log(e);
    const currentSwiper = swiperList[e];
    this.goTitleDetail(currentSwiper);
  };
  handleArticleDetail = value => {
    console.log(value);
    this.goTitleDetail(value);
  };
  onScrollToUpper(e) {
    console.log(e.detail);
  }
  // scrolltoupper = () => {
  //   console.log("11");
  // };
  // onScroll(e) {
  //   console.log(e.detail);
  //   if (e.detail.scrollTop < 4) {
  //     console.log("111");
  //     // this.setState({
  //     //   scroolType: scrollStyle2
  //     // });
  //   }
  // }

  render() {
    return (
      <View className="index">
        {/**
              <AtSearchBar
          style={{ background: "#ff4d4f" }}
          actionName="搜一下"
          value={this.state.value}
          onChange={this.onChange.bind(this)}
          onActionClick={this.onActionClick.bind(this)}
        />{" "}
      */}

        <View>
          {/** */}
          <Image
            src={bg1}
            style={{
              width: "100%",
              position: "fixed",
              zIndex: "-1",
              height: "25%"
            }}
          ></Image>

          <View style={{ paddingTop: "15%", position: "fixed", width: "100%" }}>
            <View
              style={{
                width: "80%",
                height: "30px",
                marginLeft: "10%",
                borderRadius: "0px",
                marginRight: "10%"
              }}
            >
              {" "}
              <Text style={{ color: "#fff", fontSize: "18px" }}>Hi </Text>
              <Text style={{ color: "#fff", fontSize: "16px" }}>
                欢迎来到法智行
              </Text>
            </View>
            {/** prodiver    <ClSwiper

              style={{ width: "120px", margin: "20px" }}
              className="swiper-content"
              duration={500}
              dot="round"
              indicatorDots="true"
              indicatorColor="#eeeeee30"
              list={swiperList}
              interval={1500}
              onClick={this.handleSwipperDetail}
            /> */}

            <View
              style={{
                textAlign: "center",
                marginTop: "10px"
              }}
            >
              <View
                style={{
                  height: "160px",
                  width: "80%",
                  marginLeft: "10%",
                  marginRight: "10%",
                  background: "#fff",
                  borderRadius: "8px",
                  boxShadow: "0px 12px 30px -8px #d9d9d9"
                }}
              >
                <View style={{ paddingTop: "20px" }}>
                  <View style={{ float: "left", paddingLeft: "20%" }}>
                    <Text style={{ fontSize: "12px", color: "#919191" }}>
                      {" "}
                      处理案件
                    </Text>
                    <View style={{ marginTop: "10px" }}>
                      {" "}
                      <Text style={{ fontSize: "18px" }}>122</Text>
                    </View>
                  </View>
                  <View>
                    {" "}
                    <Text style={{ fontSize: "12px", color: "#919191" }}>
                      {" "}
                      律师数目
                    </Text>
                    <View style={{ marginTop: "10px" }}>
                      {" "}
                      <Text style={{ fontSize: "18px" }}>12</Text>
                    </View>
                  </View>
                </View>
                <View
                  style={{
                    width: "80%",
                    paddingLeft: "10%",
                    paddingTop: "30px"
                  }}
                >
                  <Button
                    style={{
                      backgroundColor: "#1980ff",
                      color: "#fff",
                      height: "32px",
                      fontSize: "14px"
                    }}
                  >
                    立即咨询
                  </Button>
                </View>
              </View>
            </View>
          </View>
        </View>
        <View style={this.state.scroolType}>
          <ScrollView style={{}} scrollY upperThreshold="10">
            {/**卡片 */}
            {articleList.map(v => {
              return (
                <View
                  style={{ marginTop: "5px" }}
                  onClick={() => this.handleArticleDetail(v)}
                  key={v.id}
                >
                  <View style={{ height: "80px" }}>
                    <View
                      style={{
                        float: "left",
                        paddingLeft: "10%",
                        marginRight: "20px"
                      }}
                    >
                      <Image
                        style={{
                          height: "60px",
                          width: "60px",
                          borderRadius: "5px"
                        }}
                        src={v.cover}
                      />
                    </View>
                    <View
                      style={{
                        width: "90%"
                      }}
                    >
                      {" "}
                      <View style={{ paddingTop: "5px", height: "40px" }}>
                        {v.title}

                        <Text
                          style={{
                            fontSize: "12px",
                            color: "#919191",
                            marginLeft: "10%"
                          }}
                        >
                          {" "}
                          {v.date}
                        </Text>
                        <Text
                          style={{
                            fontSize: "12px",
                            color: "#919191",
                            float: "right",
                            paddingTop: "5px"
                          }}
                        >
                          {v.author}
                        </Text>
                      </View>
                      <View
                        style={{
                          color: "#8c8c8c",
                          fontSize: "12px",
                          height: "40px"
                        }}
                      >
                        <Text>{v.desc}</Text>
                      </View>
                    </View>
                  </View>
                </View>
              );
            })}
          </ScrollView>
        </View>
        {/**    <AtButton type="primary" onClick={this.goTitleDetail}>
          点击进入详情
        </AtButton>*/}
      </View>
    );
  }
}
